<template>
	<view class="index-page page">
		<view class="content">
			<loading v-if="showLoading"></loading>
			<CustomNav :normal="{ textColor: '#fff', background: '#FF2F34' }" title="商家活动" :is-back="true"></CustomNav>
			<view class="top-block">
				<view class="menu-block">
					<view class="menu-item" style="flex-grow: 1;">
						<view @click="change(item.classification)"
							:class="classification==item.classification?'active':''" class="tab-item"
							v-for="(item,index) in menuList" :key="item.id">{{item.name}}</view>
					</view>
				</view>
				<view class="search-block">
					<view class="input-block">
						<view class="input-left">
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/search.png"
								mode=""></image>
							<input placeholder="请输入关键字" v-model="conf.businessName" @confirm="search" />
						</view>
						<view class="search" @click="search">
							搜索
						</view>
					</view>
				</view>
			</view>
			<view class="info-block">
				<view class="classify-tab-block">
					<view class="tab-content" style="flex-grow: 1;">
						<view :class="status==''?'active':''" class="tab-item" @click="getMallTypeAll()">全部</view>
						<view @click="getMallType(item.id)" :class="status==item.id?'active':''" class="tab-item"
							v-for="(item,index) in tabList" :key="item.id">{{item.name}}</view>
					</view>
				</view>
				<template v-if="list.length>0">
					<template v-if="classification===5">
						<view class="activity-item" v-for="(item,index) in list" :key="item.id">
							<view class="activity-top">
								<view class="top-left">
									<image
										src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus2.png">
									</image>
									<view class="title">
										{{item.businessInfo.businessName}}
									</view>
								</view>
								<view class="top-right" v-if="item.status==1" style="color: #60DC4D;">
									待使用
								</view>
								<view class="top-right" v-if="item.status==2" style="color: #FF2F34;">
									待评价
								</view>
								<view class="top-right" v-if="item.status==4" style="color: #767676;">
									已取消
								</view>
							</view>
							<view class="activity-middle"
								@click="navigate('/page_other/activity/merchant?id='+item.businessId+'&type=2&activityType=2&jumpActivity='+5)">
								<image :src="cloudStorage+item.businessInfo.businessFace" mode=""></image>
								<view class="middle-right">
									<view class="info-top">
										<view class="info-title">
											消费多少送多少
										</view>
										<!-- <view class="involution">
											￥{{item.activityInfo.price}}
										</view> -->
									</view>
									<view class="info-time">
										下单时间：{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="activity-bottom">
								<view class="cancel" v-if="item.status==1" @click="openPop(item.id)">
									取消订单
								</view>
								<view class="yard" v-if="item.status==1" @click="sisignIn(item)">
									核销码
								</view>
								<view class="yard" v-if="item.status==2"
									@click="navigate('/page_other/activity/write_comment?commentType=2&id='+item.id)">
									去评价
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="activity-item" v-for="(item,index) in list" :key="item.id">
							<view class="activity-top">
								<view class="top-left">
									<image
										src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus2.png">
									</image>
									<view class="title">
										{{item.businessName}}
									</view>
								</view>
								<view class="top-right" v-if="item.status==1" style="color: #60DC4D;">
									待使用
								</view>
								<view class="top-right" v-if="item.status==2" style="color: #FF2F34;">
									待评价
								</view>
								<view class="top-right" v-if="item.status==4" style="color: #767676;">
									已取消
								</view>
							</view>
							<view class="activity-middle"
								@click="navigate('/page_other/activity/activityDetail?id='+item.activityId+'&latitude='+latitude+'&longitude='+longitude)">
								<image :src="cloudStorage+item.activityCover" mode=""></image>
								<view class="middle-right">
									<view class="info-top">

										<view class="info-title">
											{{item.activityName}}
										</view>
										<view class="involution">
											￥{{item.voucher}}券
										</view>
									</view>
									<view class="info-time">
										下单时间：{{item.createTime}}
									</view>
								</view>
							</view>
							<view class="activity-bottom">
								<view class="cancel" v-if="item.status==1" @click="openPop(item.id)">
									取消订单
								</view>
								<view class="yard" v-if="item.status==1" @click="sisignIn(item)">
									核销码
								</view>
								<view class="yard" v-if="item.status==2"
									@click="navigate('/page_other/activity/write_comment?id='+item.orderId)">
									去评价
								</view>
							</view>
						</view>
					</template>
				</template>
				<view v-if="more==false&&list.length==0" class="empty">暂无数据</view>
				<view v-else-if="more==false&&list.length>0" class="empty">没有更多了</view>
			</view>
			<view class="sign-pop" v-if="signShow == true">
				<view class="sign-block">
					<view class="sign-top">
						<view class="left">
							核销码
						</view>
						<view @click="close">
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/close.png"
								mode=""></image>
						</view>
					</view>
					<image :src="cloudStorage+verificationFilepath" mode="widthFix" v-if="classification===5"></image>
					<image :src="cloudStorage+verificationCode" mode="widthFix" v-else></image>
				</view>
			</view>
			<view class="cancel-pop" v-if="form.status==true">
				<view class="cancel-block">
					<view class="cancel-title">
						<view class="title">取消原因</view>
						<view @click="closePop">
							<image
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/close.png"
								mode=""></image>
						</view>
					</view>
					<view class="cancel-info">
						<radio-group @change="radioChange">
							<view class="cancel-list" v-for="item in reasonList" :key="item.id">
								<view class="name">{{item.name}}</view>
								<radio :value="item.id" style="transform:scale(0.7);" color="#FF2F34">
								</radio>
							</view>
						</radio-group>
					</view>
					<view class="btn" @click="userCancelOrder">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav';
	import Tabbar from '@/components/Tabbar/Tabbar';
	import {
		getUserOrderList,
		userCancelOrder,
		getOrderReasonApi
	} from '@/api/acticity.js';
	import {
		getMenuListApi
	} from '@/api/activities.js';
	import {
		isMore
	} from '@/util/util.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		getStorage
	} from '@/util/auth';
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				verificationCode: '',
				verificationFilepath: '',
				status: '',
				signShow: false,
				state: 1,
				list: [],
				conf: {
					page: 1,
					limit: 10,
					businessName: '',
				},
				more: true,
				tabList: [{
						id: 1,
						name: '待使用'
					},
					{
						id: 2,
						name: '待评价'
					},
					{
						id: 3,
						name: '已完成'
					},
					{
						id: 4,
						name: '已取消'
					},
				],
				reasonList: [],
				form: {
					current: '',
					status: false,
					id: null
				},
				rules: {
					current: {
						name: '取消原因',
						required: true
					},
				},
				latitude: '',
				longitude: '',
				classification: 1,
				menuList: []
			};
		},
		async onLoad(e) {

			if (e.status) {
				this.status = e.status
			} else {
				this.status = ''
			}

			this.latitude = getStorage('latitude')
			this.longitude = getStorage('longitude')
			uni.showCustomLoading();
			Promise.all([this.getUserOrderList(true), this.getOrderReason(), this.getMenuList()]).finally(() => {
				uni.hideCustomLoading()
			})
		},
		onShow() {},

		methods: {
			search() {
				this.getUserOrderList(true)
			},
			close() {
				this.signShow = false
				this.getUserOrderList(true)
			},
			getMallTypeAll() {
				this.status = ''
				this.getUserOrderList(true)
			},
			getMallType(e) {
				this.status = e
				this.getUserOrderList(true)
			},
			change(e) {
				this.classification = e
				this.getUserOrderList(true)

			},
			getMenuList() {
				return getMenuListApi().then((res) => {
					this.menuList = res
					this.classification = res[0].classification
				})
			},
			getOrderReason() {
				return getOrderReasonApi().then((res) => {
					this.reasonList = res
				})
			},
			openPop(e) {
				this.form.id = e;
				this.form.status = true
			},
			closePop() {
				this.form.status = false
			},
			radioChange(evt) {
				this.form.current = evt.detail.value
			},
			//用户取消订单
			userCancelOrder(id) {
				var that = this;
				if (validate(this.form, this.rules)) {
					uni.showModal({
						title: '提示',
						content: '您确定要取消此订单吗？',
						cancelText: '取消',
						confirmText: '确定',
						success(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '取消中',
									mask: true
								})
								userCancelOrder({
									id: that.form.id,
									orderReason: that.form.current,
									classification: that.classification
								}).then((res) => {
									that.showToast('已取消订单')
									that.closePop()
									that.getUserOrderList(true)
								})
							}
						}
					})
				}
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserOrderList(true)
			},
			//用户查询订单
			getUserOrderList(refresh = false) {
				return getUserOrderList({
					page: this.conf.page,
					limit: this.conf.limit,
					status: this.status,
					businessName: this.conf.businessName,
					classification: this.classification
				}).then((res) => {
					let list = res.list || [];
					if (refresh) {
						this.list = list;

					} else {
						this.list = [...this.list, ...list]
					}
					this.more = isMore(this.conf.page, this.conf.limit, res.count)
				})
			},
			sisignIn(e) {
				this.verificationCode = e.verificationCode
				if (e.verificationFilepath) {
					this.verificationFilepath = e.verificationFilepath
				}
				this.signShow = true;
			},
		},
		onPullDownRefresh() {
			this.handleRefresh();
		},
		onReachBottom() {
			if (this.more) {
				this.conf.page++;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getUserOrderList();
			}
		},
	};
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;

		.top-banner {
			width: 100%;
		}

		.content {
			width: 100%;
			overflow-y: auto;
			position: relative;

			.top-block {
				width: 100%;
				height: 260rpx;
				margin-top: 160rpx;
				background-color: #FF2F34;
				padding: 30rpx;
			}

			.search-block {
				width: 100%;
				height: 70rpx;
				display: flex;


				.address-block {
					display: flex;
					background-color: #FFFFFF;
					align-items: center;
					justify-content: center;
					width: 130rpx;
					border-radius: 50px;
					margin-right: 20rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}

					.address {
						color: #FF2F34;
						font-size: 28rpx;
					}
				}

				.input-block {
					display: flex;
					background-color: #FFFFFF;
					border-radius: 50px;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 6rpx 6rpx 6rpx 20rpx;

					.input-left {
						width: calc(100% - 140rpx);
						display: flex;

						image {
							width: 30rpx;
							height: 30rpx;
							// margin-right: 5rpx;
							margin: 7rpx 7rpx 0 0;
						}

						input {
							border-radius: 50px;
							width: 100%;

						}
					}

					.search {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 130rpx;
						border-radius: 50rpx;
						height: 100%;
						padding-bottom: 5rpx;
						color: #FFFFFF;
						background: linear-gradient(90deg, #FF2F34 0%, #FF6B18 100%);
					}
				}
			}

			.menu-block {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;

				.menu-item {
					display: flex;
					align-items: center;
					justify-content: space-around;

					.tab-item {
						background-color: #FFFFFF;
						padding: 10rpx 20rpx;
						border-radius: 40rpx;
						font-size: 28rpx;
					}

					.tab-item.active {
						color: #FF2F34;
					}
				}
			}

			.info-block {
				position: relative;
				background-color: #f7f6f9;
				border-radius: 50rpx 50rpx 0 0;
				padding: 30rpx;
				margin-top: -60rpx;

				.classify-tab-block {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 20rpx;

					.tab-content {
						display: flex;
						justify-content: space-between;

						.tab-item {
							padding: 10rpx;
							font-size: 30rpx;
							margin-right: 20rpx;
							flex: none;
							color: #FF2F34;
						}

						.tab-item.active {
							font-size: 32rpx;
							color: #FF2F34;
							font-family: 'FangZhengHanZhenGuangBiaoJianTi';
						}
					}

					.iconfont {
						font-size: 32rpx;
						font-weight: bold;
						color: #fff;
					}
				}

				.activity-item {
					padding: 24rpx 30rpx 20rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					.activity-top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 26rpx;

						.top-left {
							width: calc(100% - 100rpx);
							display: flex;
							align-items: center;

							image {
								width: 40rpx;
								height: 40rpx;
								margin-right: 10rpx;
							}

							.title {
								width: calc(100% - 50rpx);
								font-size: 30rpx;
								font-weight: bold;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.top-right {
							font-size: 30rpx;
						}
					}

					.activity-middle {
						display: flex;

						image {
							width: 120rpx;
							height: 120rpx;
							margin-right: 20rpx;
							border-radius: 20rpx;
						}

						.middle-right {
							width: calc(100% - 140rpx);
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.info-top {
								width: 100%;
								display: flex;
								justify-content: space-between;


								.info-title {
									width: calc(100% - 150rpx);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-size: 28rpx;
								}

								.involution {
									width: 150rpx;
									text-align: end;
									font-weight: bold;
								}
							}

							.info-time {
								font-size: 28rpx;
							}
						}
					}

					.activity-bottom {
						display: flex;
						margin-top: 26rpx;
						display: flex;
						justify-content: flex-end;
						font-size: 30rpx;

						.cancel {
							padding: 10rpx 20rpx;
							border: 1px solid #767676;
							color: #767676;
							box-sizing: border-box;
							border-radius: 100rpx;
							margin-right: 20rpx;
						}

						.yard {
							padding: 10rpx 20rpx;
							border: 1px solid #FF2F34;
							box-sizing: border-box;
							border-radius: 100rpx;
							color: #FF2F34;
						}
					}

				}
			}

			.sign-pop {
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.2);
				z-index: 999999;
				width: 100vw;
				height: 100vh;

				.sign-block {
					width: calc(100% - 240rpx);
					height: 550rpx;
					background: #fff;
					z-index: 99;
					position: fixed;
					transform: translate(-50%, 0%);
					left: 50%;
					bottom: 29%;
					box-shadow: 0 0 6px 0px #dadada;
					border-radius: 30rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 30rpx;

					.sign-top {
						display: flex;
						justify-content: space-between;
						width: 100%;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					image {
						width: 100%;
					}
				}
			}

			.cancel-pop {
				position: fixed;
				left: 0;
				top: 0;
				background: rgba(0, 0, 0, 0.2);
				z-index: 999999;
				width: 100vw;
				height: 100vh;

				.cancel-block {
					width: 100%;
					padding: 30rpx;
					background: #fff;
					z-index: 99;
					position: fixed;
					bottom: 0;
					box-shadow: 0 0 6px 0px #dadada;
					border-radius: 30rpx;
					display: flex;
					flex-direction: column;

					.cancel-title {
						display: flex;
						justify-content: space-between;

						.title {
							font-size: 34rpx;
							font-weight: bold;
						}

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.cancel-info {
						margin-top: 30rpx;

						.cancel-list {
							display: flex;
							justify-content: space-between;
							line-height: 90rpx;

							.name {
								font-size: 32rpx;
							}
						}
					}

					.btn {
						background-color: #FF2F34;
						width: 60%;
						height: 80rpx;
						border-radius: 50rpx;
						color: #fff;
						display: flex;
						margin: 30rpx auto;
						border-radius: 60rpx;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.empty {
				text-align: center;
			}
		}
	}
</style>